<template>
  <div class="category_list">
    <!--
      1. 布局方面 -  这里只是单纯的布局,因为后台并没有给出,我必须写接口,但是时间上兵不允许,直接上样式即可
          想法: 头部
      2,
    -->
    <simple-header></simple-header>
    <div class="list-content" id="list-content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="人家也是有底线的哟"
          @load="onLoad"
          :offset="10"
        >
          <van-cell
            v-for="item in goodsList"
            :key="item.productId"
            class="good_desc"
            @click="jumpDetail(item.productId)"
          >
            <div class="pic" v-html="item.productImg"></div>
            <div class="info">
              <p class="tit van-ellipsis">{{item.productName}}</p>
              <p class="price">{{item.productPrice}}</p>
              <p class="ctrl">
                <span class="queto">{{item.productQuote}}</span>
                <span class="comment">{{item.productCom}}</span>
              </p>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 弹出层,这个功能可以作为全局来使用 -->
    <van-popup v-model="show" position="top" :overlay="false">
      <ul class="popCon">待完成...............</ul>
    </van-popup>
    <van-popup v-model="showRight" position="right">
      <img src="/images/filter_goods.png" alt>
    </van-popup>
  </div>
</template>

<script>
import simpleHeader from 'common/mHeader/simpleHeader'
export default {
  name: 'CategoryList',
  data() {
    return {
      page: 1,
      list: [],
      goodsList: [],
      loading: false, // 是否处于上拉加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      show: false,
      showRight: false,
      cateId: this.$route.params.id
    }
  },
  computed: {
    catename() {
      return this.$route.query.catename
    }
  },
  methods: {
    //   跳转到商品详情页,需要附上当前商品的id
    jumpDetail(gid) {
      this.$router.push({
        name: 'GoodsDetail',
        params: {
          gid
        }
      })
    },
    clickLeft() {
      this.show = !this.show
    },
    clickRight() {
      // 触发搜索页面,让用户去搜索商品
      console.log('触发搜索页面,让用户去搜索商品')
    },
    onLoad() {
      //  其实就是page++ ,然后将数据进行重新渲染
      const cateId = this.$route.params.id
      this.page++
      this.$api.home.getproductlist(cateId, this.page).then(({ status, data: info }) => {
        //    做一下拼接即可,拿不到就改变finish的状态就行
        console.log(info, '加载回来的是什么东东?')
        if (status === 200) {
          // 设定结束条件
          if (!info.result.length) {
            this.loading = false
            this.finished = true
          } else {
            this.loading = false
            const x = this.goodsList.concat(info.result)
            console.log(x, '@@@@@')
            this.$nextTick(() => {
              this.goodsList = x
            })
          }
        }
      })
    },
    onRefresh() {
      // 下拉刷新 -- 重新获取第一页的数据,并且
      this.page = 1
      this.isLoading = true
      this.goodsList = []
      this.$api.home.getproductlist(this.cateId, this.page).then(({ status, data: info }) => {
        //    做一下拼接即可,拿不到就改变finish的状态就行
        if (status === 200) {
          // 设定结束条件
          this.isLoading = false
          this.finished = false
          this.goodsList = info.result
          console.log('****')
        }
      })
      /*      setTimeout(() => {
             this.finished = false;
             this.isLoading = false;
             this.list = []
             this.onLoad()
           }, 500); */
    },
    // 初始化数据 ,获取到当前类的第一条分类
    initData() {
      const secondCatId = this.$route.params.id
      const page = 1
      // 拿到第一页当前分类的数据
      this.$api.home.getproductlist(secondCatId, page).then(({ status, data: info }) => {
        if (status === 200) {
          this.goodsList = info.result
        }
      })
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    const winHeight = document.documentElement.clientHeight // 视口大小
    document.getElementById('list-content').style.height = (winHeight - 46) + 'px' // 调整上拉加载框高度
  },
  components: {
    simpleHeader
  }
}
</script>

<style  lang='stylus' scoped>
.van-popup--top
  top 0.92rem
  bottom 0
  background pink
.popCon
  background-color #2f2e3a
  width 100%
  height 100%
  color #fff
  font-size 0.8rem
  text-align center
.van-nav-bar__left
  font-size 0.38rem
  .van-icon
    color #fff
.van-nav-bar__right
  font-size 0.38rem
  .van-icon-search
    color #fff
.list-content
  margin-top 46px
  // margin-bottom 50px
  overflow scroll
  .van-cell__value
    display flex
    align-items center
    .pic
      margin-right 0.2rem
      img
        height 100%
    .info
      flex 1
      .tit
        font 0.28rem / 0.32rem '微软雅黑'
        margin-bottom 0.1rem
      .price
        color #eb4616
      .ctrl
        color #a8adb2
      .comment
        margin-left 0.2rem
.goods_navbar
  background-color #2f2e3a
  .van-nav-bar__title
    color #fff
</style>
